﻿(function ($) {
    oo('class', {
        prop: [
            {
                name: 'ui',
                isStatic: true
            },
            {
                name: 'bar',
                isStatic: true
            }
        ],
        _loading: function () {
            if (this.prop('ui'))
                return;
            var bar = $('<div>').progressbar({ width: 400 });
            var ui = $('<div>').css({ padding: 10, display: 'none' }).append(bar).appendTo($(document));
            this.prop('ui', ui).prop('bar', bar);
        },
        show: function (title) {
            this.prop('ui').show().dialog({
                title: title || 'loading',
                width: 435,
                height: 75,
                closable: false,
                modal: true
            });
            this.prop('bar').progressbar('setValue', 0);
            startProress();
        },
        hide: function () {
            this.prop('bar').progressbar('setValue', 100);
            setTimeout((function (self) {
                return function () {
                    self.prop('ui').dialog('close');
                };
            })(this), 500);
        }
    });

    function startProress() {
        var bar = oo('loading').prop('bar');
        var schedule = bar.progressbar('getValue');
        if (schedule < 100) {
            schedule += Math.floor(Math.random() * 5);
            bar.progressbar('setValue', schedule);
            setTimeout(arguments.callee, 300);
        }
    };
})(jQuery);